<template>
    <div class="app-container" v-loading="listLoading">
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-form-item label="设备">
                        <el-select v-model="queryParms.device_id" placeholder="选择设备">
                            <el-option
                            v-for="item in deviceList"
                            :key="item.device_id"
                            :label="item.name"
                            :value="item.device_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="预警类型">
                        <el-select v-model="queryParms.device_type" placeholder="选择类型">
                            <el-option
                            v-for="item in deviceTypeList"
                            :key="item.keyword"
                            :label="item.name"
                            :value="item.keyword">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

             
                <el-col :span="6">
                    <el-button type="primary" @click="queryPage">搜索</el-button>
                   
                </el-col>
                <el-col :span="6">
                    <div style="height: 1px;"></div>
                </el-col>
             

                <el-col :span="4">
                    <el-select v-model="app_id" placeholder="选择项目">
                        <el-option
                        v-for="item in projectList"
                        :key="item.app_id"
                        :label="item.name"
                        :value="item.app_id">
                        </el-option>
                    </el-select>
                </el-col>
               
            </el-row>

        </el-form>
       

        <el-table  :data="list" element-loading-text="Loading" border fit highlight-current-row>
           

            
            <el-table-column  label="设备名称">
                <template slot-scope="scope">
                    {{ scope.row.device_name }}
                </template>
            </el-table-column>


            <el-table-column label="最后数据">
                <template slot-scope="scope">
                    <span>{{getDataList(scope.row.last_value)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="提醒类型" width="200px">
                <template slot-scope="scope">
                    <span>{{scope.row.remind_type}}</span>
                   
                </template>
            </el-table-column>
            <el-table-column label="报警类型" width="200px">
                <template slot-scope="scope">
                    <span>{{scope.row.warning_type_name}}</span>
                   
                </template>
            </el-table-column>
            <el-table-column label="最后数据时间">
                <template slot-scope="scope">
                    <span>{{getTime(scope.row.redmind_time)}}</span>
                </template>
            </el-table-column>

            <el-table-column label="处理意见">
                <template slot-scope="scope">
                    <span>{{scope.row.do_remark}}</span>
                </template>
            </el-table-column>
            <el-table-column label="处理图片">
                <template slot-scope="scope">
                    <template v-if="scope.row.do_img">
                        <template v-for="item in scope.row.do_img.split(',')">
                            <div class="imgdiv">
                                <el-image  
                                    style="width: 120px; height: 120px"
                                    :src="item" 
                                    :preview-src-list="[item]">

                                </el-image>
                        
                            </div>
                        </template>
                    </template>
                   
                   
                </template>
            </el-table-column>
            <el-table-column  label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" v-if="!scope.row.do_time" @click="showDialog(scope.row)">处理</el-button>
                
                </template>
            </el-table-column>
        </el-table>


        <el-pagination
            style="float: right;margin-top: 20px;"
            @current-change="changePage"
            background
            layout="prev, pager, next,jumper"
            :total="queryParms.total">
        </el-pagination>



        <el-dialog title="处理预警" :visible.sync="dialogFormVisible">
            <el-form :model="form">
               
                <el-form-item label="处理备注" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="5"
                        resize="none"
                        placeholder="请输入内容"
                        v-model="form.remind_remark">
                    </el-input>
                    <!-- <el-input v-model="form.intro" autocomplete="off" placeholder="请输入项目简介"></el-input> -->
                </el-form-item>
                <el-form-item label="处理照片" :label-width="formLabelWidth">
                    <div class="imgMainDiv" v-if="form.imgList.length>0">
                        <template v-for="(item,index) in form.imgList">
                            <div class="img_div" style="width: 160px; height: 160px">
                                <el-image 
                                    style="width: 160px; height: 160px"
                                    :src="item" 
                                    :preview-src-list="form.imgList">
                                </el-image>
                                <i class="el-icon-error" @click="deleteImg(index,1,'imgList')"></i>
                            </div>
                            
                        </template>
                       
                        <!-- <img :src="form.face_img"> -->
                    </div>
                    <div class="upload_div">
                        <i class="el-icon-plus"></i>
                        <input type="file" accept="image/*" @change="changeFile($event,'imgList',1)"/>
                    </div>
            
                </el-form-item>
          
              
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureForm">确 定</el-button>
            </div>
        </el-dialog>




 



        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
export default {
    data() {
        return {
            list: null,
            listLoading: true,
            queryParms:{
                page:1,
                page_size:10,
              
                remind_type:"",
                total:0
               
            },
            form:{
                app_id:"",
                remind_id:"",
                remind_remark:"",
                remind_img:"",
         
                imgList:[],
                
            },
            dialogFormVisible:false,
            formLabelWidth:'100px',
            projectList:[],
            app_id:"",
            deviceTypeList:[],

            drawer:false,
            nowItem:{},


           

        }
    },
    watch:{
        app_id(){
            until.setCookie("app_id",this.app_id)
            this.getDeviceList();
            this.getDeviceDataList();
       
        }
    },
    created() {
        

        this.fetchData()
        this.getDeviceType();
    },
    methods: {
        showDialog(item){
            this.dialogFormVisible=true;
            this.form={
                app_id:this.app_id,
                remind_id:item.remind_id,
                remind_remark:"",
                remind_img:"",
         
                imgList:[],
            }
        },
        changePage(page){
            this.queryParms.page=page;
            this.getDeviceDataList();
        },
         //获取设备
         async getDeviceList(){
            let page=1;
            let page_size=99999
            let name=""
            let app_id=this.app_id
            let data=await homeapi.Smos_apiDevicePageGet({page,page_size,name,app_id});
            if(data.error_code==0){
                this.deviceList=data.data.list
            }
        },

        getDataList(dataList){
            let dataName=""
            dataList.map(res=>{
                if(dataName==""){
                    dataName=res.value_name+":"+res.value+res.value_unit
                }
                else{
                    dataName+=","+res.value_name+":"+res.value+res.value_unit
                }
            })
            return dataName
        },

        getTime(time){
            return until.formatDateChinese(time*1000)
        },

        async getDeviceType(){
            let data=await homeapi.Smos_apiDeviceTypesGet();
            if(data.error_code==0){
                this.deviceTypeList=data.data;
            }
        },
        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },
        async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
                    this.getDeviceList();
                    this.getDeviceDataList();
              
                })
               
                
               
            }
        },
        queryPage(){
            this.queryParms.page=1;
            this.getDeviceDataList();
        },
     
        async sureForm(){
          
            this.addForm();
            
        },
        async getDeviceDataList(){
            let form=this.queryParms;
           
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiRemindPageGet(form);
            if(data.error_code==0){
                this.list=data.data.list?data.data.list:[];
                this.queryParms.total=data.data.total
            }
        },
        async addForm(){
            let form=this.form;
          
            form.remind_img=form.imgList.length>0?form.imgList.join(","):""
            this.listLoading=true;
            let data=await homeapi.Smos_apiRemindDoPut(form);
            console.log(data)
            if(data.error_code==0){
                this.listLoading=false
                this.$message.success("处理成功")
                this.dialogFormVisible=false;
                this.getDeviceDataList();

            }
        },
         
    
    }
}
</script>
<style lang="css" scoped>
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        float: left;
        margin-left: 10px;
        

    }
    .upload_div input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv{
        width: 120px;
        
    }
    .imgdiv img{
        width: 100%;
       
    }
    .upload_div i{
        font-size: 32px;
    }
    .imgMainDiv{
        width: 160px;
        height: 160px;
        float: left;
    }
    .imgMainDiv img{
        width: 100%;
        height: 100%;
    }
    
</style>